<template>
    <div id="recommend">
        <Layout>
            <Row>
                <Col span='4' :offset='2' class="bigFont">热点推荐</Col>
            </Row>
            <Row class="productContainer">
                <Col span='20' :offset='2'>
                <Col span='1' class="productControl">
                <img src="@/assets/images/index/back.png" alt="" @click='prev(currentIndex,totalPage)'>
                </Col>
                <Col class='distance'></Col>
                <Col v-for="(item,index) in productArry" :key="item.id">
                <Col span="5" class="recommendProduct">
                <img v-show='item.status==3' src="@/assets/images/index/hotSaleSmall.png" alt="">
                <span v-show='item.status==3'>正在热销</span>
                <img v-show='item.status==1' src="@/assets/images/index/qidaiSmall.png" alt="">
                <span v-show='item.status==1'>敬请期待</span>
                <img v-show='item.status==2' src="@/assets/images/index/nowBuySmall.png" alt="">
                <span v-show='item.status==2'>立即抢购</span>
                <img v-show='item.status==4' src="@/assets/images/index/cunxuSmall.png" alt="">
                <span v-show='item.status==4'>暂停申购</span>
                <p class="text-center productName" v-text="item.abbrevName"></p>
                <p class="text-center productName" v-text="item.code"></p>
                <p class="text-center numFont" v-show="item.type==1&&item.avaRate!=null">{{item.avaRate|filterSave(2)}}%</p>
                <p class="text-center numFont" v-show="item.type==1&&item.avaRate==null">暂无</p>
                <p class="text-center numFont" v-show="item.type==2&&item.accumulateProfit!=null">{{item.accumulateProfit*100|filterSave(2)}}%</p>
                <p class="text-center numFont" v-show="item.type==2&&item.accumulateProfit==null">暂无</p>
                <p class="text-center product-terminal-font" v-show="item.type==1">{{item.displayRateTypeString}}</p>
                <p class="text-center product-terminal-font" v-show="item.type==2">七日年化</p>
                <Col span='12' class="text-center product-info">
                <p v-show='item.termDays>0'>{{item.termDays}}</p>
                <p v-show='item.termMonths>0'>{{item.termMonths}}</p>
                <p v-show='item.termYears>0'>{{item.termYears}}</p>
                <p v-show='item.termType==1&&item.termDays==0&&item.termYears==0&&item.termMonths==0'>暂无</p>
                <p v-show="item.termType==0">长期</p>
                <p>产品期限</p>
                </Col>
                <Col span='12' class="text-center product-info">
                <p>{{item.riskRankString}}</p>
                <p>风险等级</p>
                </Col>
                <Col span='6' :offset='2' class="text-center product-symbol">大集合</Col>
                <Col span='6' :offset='1' class="text-center product-symbol">中高风险</Col>
                <Col span='6' :offset='1' class="text-center product-symbol">稳重有进</Col>
                </Col>
                <Col class='distance'></Col>
                </Col>

                <!-- <Col span="5" class="recommendProduct">
                </Col>
                <Col class='distance'></Col>
                <Col span="5" class="recommendProduct">
                </Col>
                <Col class='distance'></Col>
                <Col span="5" class="recommendProduct">
                </Col> -->
                <!-- <Col class='distance'></Col> -->
                <Col span="1" class="text-right productControl">
                <img src="@/assets/images/index/next.png" alt="" @click='next(currentIndex,totalPage)'>
                </Col>
                </Col>

            </Row>

        </Layout>
    </div>
</template>

<script>
export default {
  data() {
    return {
      totalPage: '',
      currentIndex: 1,
      productArry: [],
      dataSource: []
    }
  },
  created() {
    this.$fetch({
      url: '/recommend',
      method: 'GET'
    }).then(response => {
      this.dataSource = response.data.dataSource;
      this.totalPage = response.data.totalPage;
      this.productArry = response.data.productArry;
    })
  
  },
  methods: {
    prev(currentIndex, totalPage) {
      if (currentIndex == 1) {
        this.currentIndex = this.totalPage
      } else {
        this.currentIndex -= 1
      }
      this.productArry = this.dataSource.slice(
        4 * this.currentIndex - 4,
        4 * this.currentIndex
      )
    },
    next(currentIndex, totalPage) {
      if (currentIndex == totalPage) {
        this.currentIndex = 1
      } else {
        this.currentIndex += 1
      }
      this.productArry = this.dataSource.slice(
        4 * this.currentIndex - 4,
        4 * this.currentIndex
      )
    }
  }
}
</script>
<style>

</style>

